import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Column } from '@ant-design/plots';
import { Card, Radio } from 'antd';
import { qryPointStats } from '../services';

const Integral = () => {
  const [data, setData] = useState([]);
  useEffect(() => {
    asyncFetch(7);
  }, []);

  // 获取图表数据
  const asyncFetch = async (amount: number) => {
    let data = await qryPointStats({ amount: amount })
    if (data) {
      setData(data.body)
    }
  };
  // 时间选择
  const showInfo = (e: any) => {
    Number(e.target.value);
    asyncFetch(Number(e.target.value))
  }

  const config = {
    data,
    xField: 'date',
    yField: 'point',
    height: 240,
    // 图形宽度占比
    columnWidthRatio: 0.5,
    label: {
      position: 'middle',
      style: {
        fill: '#FFFFFF',
        opacity: 0.6,
      },
    },
    yAxis: {
      title: {
        text: '积分',
        spacing: 6
      },
    },
    meta: {
      point: {
        alias: '积分激励量',
      },
    },
  };
  return <Card bodyStyle={{ padding: '4px 24px 24px' }}>
    <div className="rangeTimeSelect">
      <p className="formTitle">积分激励看板</p>
      <Radio.Group
        defaultValue="7"
        buttonStyle="solid"
        onChange={showInfo}
      >
        <Radio.Button value="7">近七天</Radio.Button>
        <Radio.Button value="30">近30天</Radio.Button>
      </Radio.Group>
    </div>
    <Column {...config} />
  </Card>

}
export default Integral